<template>
  <el-dialog :title="this.options.title" :visible.sync="this.options.isVisitable" @close="closeDialog">
    <el-form ref="dialogForm" :inline="true" :model="formData" :rules="rules" status-icon>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="ID" :label-width="formLabelWidth" prop="menuId">
            <el-input v-model="formData.menuId"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
            <el-select placeholder="-- 请选择 --" v-model="formData.type" clearable>
              <el-option v-for="item in dicts['sys_menu_type']" :index="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父目录" :label-width="formLabelWidth" prop="parentId">
            <el-select placeholder="-- 请选择 --" v-model="formData.parentId" @visible-change="getAllDirectory" clearable>
              <el-option v-for="item in allDirectory" :key="item.menuId" :label="item.name" :value="item.menuId" :disabled="!item.enable">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.parentId | levelFilter }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="formData.name"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="后端路径" :label-width="formLabelWidth" prop="url">
            <el-input :disabled="formData.type === '0'" v-model="formData.url"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="路由路径" :label-width="formLabelWidth" prop="routeUrl">
            <el-input :disabled="formData.type !== '1'" v-model="formData.routeUrl"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input :disabled="formData.parentId !== 0" v-model="formData.icon"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input-number v-model="formData.orderNum"  :min="0" :max="20"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识" :label-width="formLabelWidth">
            <el-input :disabled="formData.type === '0'" v-model="formData.permission"  autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否启用" :label-width="formLabelWidth" prop="enable">
            <el-select placeholder="-- 请选择 --" v-model="formData.enable" clearable>
              <el-option v-for="item in dicts['common_yes_no']" :index="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否外链" :label-width="formLabelWidth" prop="isLink">
            <el-select :disabled="formData.type === '0'" placeholder="-- 请选择 --" v-model="formData.isLink" clearable>
              <el-option v-for="item in dicts['common_yes_no']" :index="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {listAllDirectory,checkIdExist,addMenu} from '@/api/sysmenuApi'
export default {
  name: 'MenuAddOrUpdateDialog',
  dicts: ['sys_menu_type','common_yes_no'],
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  filters: {
    levelFilter(val) {
      if (val === null || val === undefined) {
        return ''
      } else if (val === 0) {
        return '一级目录'
      } else if (val !== 0) {
        return '二级目录'
      }
    }
  },
  data() {
    let validateMenuId = (rule,value,callback) => {
        checkIdExist(value).then(success => {
          if (success) {
            callback(new Error('菜单ID已存在，请重新输入'))
          } else {
            callback()
          }
        })
    }
    let validateRouteUrl = (rule,value,callback) => {
      if (this.formData.type === 1 && (value === null || value === '')) {
        callback(new Error('菜单路由路径不能为空'))
      } else {
        callback()
      }
    }
    let validateIsLink = (rule,value,callback) => {
      if (this.formData.type !== 0 && (value === null || value === '')) {
        callback(new Error('请选择'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        menuId: null,
        parentId: null,
        name: '',
        url: '',
        type: null,
        icon: '',
        orderNum: 0,
        routeUrl: '',
        permission: '',
        enable: null,
        isLink: null
      },
      formLabelWidth: '100px',
      allDirectory: [],
      rules: {
        menuId: [
          { required: true, message: '请输入id', trigger: 'blur' },
          { validator: validateMenuId, trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择父目录', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        enable: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        routeUrl: [
          { validator: validateRouteUrl, trigger: 'blur' }
        ],
        isLink: [
          { validator: validateIsLink, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    submit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          addMenu(this.formData)
          this.closeDialog()
        } else {
          return false;
        }
      });
    },
    getAllDirectory(val) {
      if (val) {
        listAllDirectory().then(success => {
          if (success instanceof Array) {
            success.unshift({name: '无', menuId: 0,enable: true})
          }
          this.allDirectory = success
        })
      }
    }
  }
}
</script>

<style scoped>

</style>